<!-- 修改密码-表单信息  -->
<template>
	<view class="container">
		<view class="example">
			<uni-forms ref="baseForm" label-align="left" :rules="formRules" :modelValue="formData">
				<uni-forms-item label="原密码" name="currentPass" required labelWidth="auto" label-align="right">
					<uni-easyinput maxlength="20" v-model="formData.currentPass" focus type="password"
						placeholder="请输入" />
				</uni-forms-item>

				<uni-forms-item label="新密码" required name="password" labelWidth="auto" label-align="right">
					<uni-easyinput maxlength="20" v-model="formData.password" focus type="password" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="确认密码" required name="confirmpwd" focus labelWidth="auto" label-align="right">
					<uni-easyinput maxlength="20" v-model="formData.confirmpwd" type="password" placeholder="请输入" />
				</uni-forms-item>

			</uni-forms>
		</view>
		<view class="btn-box">
			<button class="btn1" type="warn" size="mini" @click="doSubmit('baseForm')"> 确定 </button>
			<button class="btn2 ml10" type="warn" size="mini" plain="true" @click="doCancel()"> 取消 </button>
		</view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="5000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		Platform,
		Storage_Key,
		ProjectStates,
		ProjectKeys,
		PlateColor,
		CarSetting,
		UserJobsType
	} from '@/static/config.js';

	export default {
		components: {},
		computed: {
			wxUserInfo() {
				return this.$storage.get(Storage_Key.user_info, true);
			},
			webUserInfo() {
				return this.$storage.get(Storage_Key.web_user_info, true);
			},
		},
		data() {
			return {
				// 提示信息弹窗
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',

				//表单信息
				formData: {
					password: "", //新密码
					confirmpwd: "", //确认密码
					currentPass: "", // 旧密码
				},

				// 校验规则
				formRules: {
					currentPass: {
						rules: [{
							required: true,
							errorMessage: '请输入原密码'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入新密码'
						}]
					},
					confirmpwd: {
						rules: [{
							required: true,
							errorMessage: '请再次输入密码'
						}]
					},
				},
			}
		},
		onReady() {
			this.$refs.baseForm.setRules(this.formRules)
		},
		onLoad(options) {
			let _self = this;
		},
		methods: {
			messageToggle(type, msg) {
				this.msgType = type
				this.messageText = msg
				this.$refs.message.open()
			},

			doCancel() {
				uni.navigateBack();
			},
			//修改密码
			doSubmit(ref) {
				let _self = this;
				// _self.$refs[ref].validate().then(async res => {
				// 	if (_self.formData.confirmpwd !== _self.formData.password) {
				// 		_self.messageToggle('error', '两次输入密码不一致！');
				// 		return;
				// 	}
				// 	uni.showLoading({
				// 		title: '提交中...',
				// 		mask: false
				// 	});
				// 	let model = Object.assign({}, _self.formData);
				// 	model.code = _self.webUserInfo.user.userCode;
				// 	uni.request({
				// 		url: Platform.api_requestUrl + '/osp-basemain-userinfo/UpdatePass',
				// 		data: model,
				// 		header: {},
				// 		method: 'POST',
				// 		success: (response) => {
				// 			uni.hideLoading();
				// 			if (response.data.code == 200) {
				// 				if (response.data.message == "") {
				// 					_self.messageToggle('success', '密码修改成功，请重新登录！');
				// 					uni.$emit("exitUser", {
				// 						key: true,
				// 					})
				// 				} else {
				// 					_self.messageToggle('error', '原' + response.data.message);
				// 				}

				// 			} else {
				// 				_self.messageToggle('error', response.data.message ||
				// 					'密码修改失败！');
				// 			}
				// 		},
				// 		complete: () => {
				// 			console.log("complete")
				// 		},
				// 		fail: (error) => {
				// 			uni.showModal({
				// 				content: '密码修改失败！',
				// 				showCancel: false
				// 			})
				// 		},
				// 	});
				// })
			},
		},
		watch: {},
	}
</script>

<style lang="scss" scoped>
	.example {
		padding: 0 15px 15px 15px;
		background-color: #fff;
	}

	/deep/ .example .uni-forms-item__content {
		overflow: auto;
	}

	/deep/ .example .uni-section-header {
		padding: 5px 10px;
	}

	/deep/ .example .uni-input-input {
		text-align: right;
	}

	/deep/ .example .uni-input-placeholder {
		text-align: right;
	}

	/deep/ .example .uni-input-placeholder {
		text-align: right;
	}

	/deep/ .example .uni-easyinput__content {
		border-color: #fff !important;
	}

	/deep/ .example .uni-easyinput__content-input {
		text-align: right;
	}

	/deep/ .example .uni-forms-item__inner {
		border-bottom: 1px solid #e9e9e9;
		padding-bottom: 10px;
		padding-top: 15px;
		width: 100%;
		overflow: hidden;
	}

	/deep/ .example .uni-input {
		text-align: right;
		padding: 0;
	}

	/deep/ .example .uni-date-x {
		padding: 0;
	}

	/deep/ .example .uni-date__x-input {
		padding: 0;
		text-align: right;
	}

	/deep/ .example .uni-date-x--border {
		border: 0;
	}

	.btn-box {
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 15px 10px;

		.btn1 {
			width: 90%;
			-webkit-flex: 1;
			background-color: $app-platform-color;
		}

		.btn2 {
			width: 90%;
			-webkit-flex: 1;
			color: $app-platform-color !important;
			border: 1px solid $app-platform-color !important;
		}
	}

	.platecode {
		font-size: 14px;
		margin-top: 8px;
		float: right;
		text-align: right;
	}

	.col-gap {
		width: 100vw;
		height: 12px;
		margin-left: -15px;
		margin-top: -1px;
		background-color: #e9e9e9;
	}

	/* 图片 */
	.add-box {
		padding: 15rpx 0;
		flex-wrap: wrap;
	}

	.add-img-box {
		display: flex;
		width: 100%;
		padding: 0 40rpx;
		padding-left: 10rpx;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.add-img-item {
		/* width:210rpx;
		height:210rpx; */
		width: 150rpx;
		height: 150rpx;
		border-radius: 16rpx;
		position: relative;
		/* padding: 9rpx 0; */
		margin: 5rpx 10rpx;
	}

	.add-img-camera {
		flex: 1;
	}

	.add-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 16rpx;
	}

	.add-img-del {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		right: 8rpx;
		top: 17rpx;
		border-radius: 20rpx;
	}

	.color {
		line-height: 36px !important;
	}

	.vinbox {
		height: 100%;
		text-align: right;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		padding: 8px 2px;
	}
</style>
